<template>
    <div>
        <ul class="MoveNavBar">
            <router-link v-for="item in MoveNavBarList" :key="item.name" :to="item.path" custom v-slot="{navigate,isActive}">
            <li class="MoveNavBarItem" @click="navigate"><span :class="isActive?'active':''">{{ item.name }}</span></li>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            MoveNavBarList: [
                {
                    name: '正在热映',
                    path: '/move/nowPlaying'
                },
                {
                    name: '即将上映',
                    path: '/move/willPlaying'
                }
            ]
        }
        }
    }
</script>
<style lang="scss" scoped>
*{
    margin-right: 0;
    padding: 0;
}
.MoveNavBar {
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    // height: 40px;
    display: flex;
    background-color: white;
    .MoveNavBarItem {
        flex: 1;
        
        >span{
            display: inline-block;
            height: 30px;
        }
    }
    .active{
        color:red;
        border-bottom: 1px solid red;
    }
}
</style>